<template>
  <div class="binding-container">
    <!-- 角色信息 -->
    <div v-if="profile" class="profile-section">
      <div class="profile-header">
        <img :src="`https://mc-heads.net/avatar/${profile.uuid}/40`"  class="avatar">
        <div class="profile-info">
          <h3>{{ profile.name  }}</h3>
          <div class="uuid">{{ profile.uuid  }}</div>
        </div>
      </div>

      <!-- 绑定选项 -->
      <div class="bind-options">
        <!-- 基岩版 -->
        <div class="bind-option">
          <div class="option-title">
            <div class="platform-icon bedrock">
              <i class="icon-xbox"></i>
            </div>
            <span>基岩版</span>
          </div>
          <div v-if="profile.bedrockUuid"  class="bound-status">
            <span class="status-tag">已绑定</span>
            <div class="account-id">{{ profile.bedrockUuid  }}</div>
          </div>
          <button v-else class="bind-btn" @click="startBind('bedrock')">
            绑定
          </button>
        </div>

        <!-- Java版 -->
        <div class="bind-option">
          <div class="option-title">
            <div class="platform-icon java">
              <i class="icon-java"></i>
            </div>
            <span>Java版</span>
          </div>
          <div v-if="profile.javaUuid"  class="bound-status">
            <span class="status-tag">已绑定</span>
            <div class="account-id">{{ profile.javaUuid  }}</div>
          </div>
          <button v-else class="bind-btn" @click="startBind('java')">
            绑定
          </button>
        </div>
      </div>
    </div>

    <!-- 未选择提示 -->
    <div v-else class="empty-state">
      <i class="icon-user"></i>
      <p>请选择角色</p>
    </div>

    <!-- 绑定对话框 -->
    <el-dialog
        v-model="showBindDialog"
        :title="`绑定${bindType === 'bedrock' ? '基岩版' : 'Java版'}账户`"
        width="450px"
    >
      <el-form label-width="80px">
        <el-form-item label="UUID">
          <el-input v-model="bindForm.uuid"  placeholder="输入玩家UUID" />
        </el-form-item>
        <el-form-item v-if="bindType === 'java'" label="验证令牌">
          <el-input v-model="bindForm.token"  placeholder="输入验证令牌" type="password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showBindDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmBind">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps({
  profile: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['bind-account', 'unbind-account'])

// 绑定状态
const showBindDialog = ref(false)
const bindType = ref('')
const bindForm = reactive({
  uuid: '',
  token: ''
})

// 开始绑定
const startBind = (type) => {
  bindType.value  = type
  bindForm.uuid  = ''
  bindForm.token  = ''
  showBindDialog.value  = true
}

// 确认绑定
const confirmBind = () => {
  if (!bindForm.uuid)  {
    ElMessage.warning(' 请输入有效的UUID')
    return
  }

  emit('bind-account', {
    profileId: props.profile.id,
    type: bindType.value,
    uuid: bindForm.uuid,
    token: bindType.value  === 'java' ? bindForm.token  : undefined
  })

  showBindDialog.value  = false
  ElMessage.success(' 绑定成功')
}

// 解绑账户
const unbindAccount = (type) => {
  ElMessageBox.confirm(
      `确定要解绑${type === 'bedrock' ? '基岩版' : 'Java版'}账户吗？`,
      '确认解绑',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    emit('unbind-account', {
      profileId: props.profile.id,
      type: type
    })
    ElMessage.success(' 解绑成功')
  })
}
</script>

<style scoped>
.binding-container {
  padding: 16px;
  height: 100%;
  background: #1e1e2d;
  color: #e0e0e0;
}

/* 角色信息 */
.profile-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 4px;
}

.profile-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.uuid {
  font-size: 12px;
  color: #8b93b0;
  font-family: monospace;
}

/* 绑定选项 */
.bind-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.bind-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #252538;
  border-radius: 6px;
}

.option-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.platform-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.platform-icon.bedrock  {
  background: #107c10;
}

.platform-icon.java  {
  background: #f8981d;
}

.bound-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-tag {
  padding: 2px 8px;
  font-size: 12px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}

.account-id {
  font-size: 12px;
  color: #b0b0c0;
  font-family: monospace;
}

.bind-btn {
  padding: 6px 12px;
  background: #4a6bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

.bind-btn:hover {
  background: #3a5bef;
}

/* 空状态 */
.empty-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #5a5a7a;
  gap: 8px;
}

.empty-state i {
  font-size: 32px;
}

.empty-state p {
  margin: 0;
  font-size: 14px;
}

/* 对话框样式 */
:deep(.el-dialog) {
  background: #252538;
  border-radius: 8px;
}

:deep(.el-dialog__title) {
  color: #e0e0e0;
}

:deep(.el-input__inner) {
  background: #2d2d3d;
  border-color: #3a3a4d;
  color: #e0e0e0;
}
</style>